<template>
	<view class="_card_box">
		<view :class="['u-flex','u-flex-items-center','u-p-l-32','u-p-r-32',type=='index'?'idcard':'']">
			<view class="_line"></view>
			<view class="u-m-l-16 f-s-16 f-w-b">{{ title || '标题' }}</view>
      <view >
        <slot name="head"></slot>
      </view>
		</view>

		<up-line margin="24rpx 0 0"></up-line>
		<view class="_area">
			<slot name="area"></slot>
		</view>
		<block v-if="bottom">
			<up-line  margin="24rpx 0 0"></up-line>
			<view class="_bottom">
				<slot name="bottom"></slot>
			</view>
		</block>
		
	</view>
</template>

<script setup>
	const props = defineProps({
		title: String,
		bottom: Boolean,
    type:String
	})

</script>

<style lang="scss" scoped>
.idcard{
  margin-top: -24rpx;
  margin-bottom: -24rpx;
  height: 80rpx;
  width: auto;
  border-radius: 20rpx 20rpx 0 0;
  background-image: linear-gradient(rgba(33, 160, 252, 0.3), rgba(64, 176, 246, 0.15), rgba(64, 176, 246, 0.05));
}
	._card_box {
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 16rpx;
		padding: 24rpx 0;
		margin-bottom: 24rpx;
		._line {
			width: 6rpx;
			height: 28rpx;
			background: #1677FF;
		}
		._area{
			padding: 24rpx 32rpx 0;
		}
		._bottom{
			padding: 24rpx 32rpx 0;
		}
	}
</style>